import { NodeSize } from '../config'

export default function mqttProducer(flow) {
  flow.register('MqttProducer', ({ PolygonNode, PolygonNodeModel, h }) => {
    class Node extends PolygonNode {
      getIconShape() {
        return h(
          'svg',
          {
            width: NodeSize,
            height: NodeSize,
            viewBox: '0 0 1024 1024'
          },
          h(
            'path',
            {
              fill: '#EFF9FE',
              d: 'M780.190476 780.190476V243.809524H425.691429L243.809524 428.373333V780.190476h536.380952z'
            }
          ),
          h(
            'path',
            {
              fill: '#3D6480',
              d: 'M780.190476 243.809524v536.380952H243.809524V428.373333l-48.761905 46.08V828.952381h633.904762V195.047619H474.453333l-48.761904 48.761905H780.190476zM226.742857 199.92381L99.230476 72.655238 66.56 105.325714l127.512381 127.268572H117.272381v46.567619l155.794286-0.24381V124.830476H226.742857V199.92381z'
            }
          ),
          h(
            'path',
            {
              fill: '#3D6480',
              d: 'M606.354286 528.091429c-1.950476-36.815238-4.144762-80.944762-3.900953-113.615239-9.020952 30.72-19.992381 63.634286-33.401904 99.961905l-46.32381 127.512381h-26.819048l-42.422857-125.318095c-12.434286-37.059048-22.918095-70.948571-30.47619-102.156191 0 32.670476-2.681905 76.8-5.12 116.297143l-7.070476 112.64h-33.158096l18.529524-262.826666H438.857143l44.860952 127.024762c10.971429 32.426667 19.992381 61.44 26.575238 88.746666H512c6.582857-26.575238 16.091429-55.588571 27.794286-88.746666l46.811428-127.024762h43.154286l16.579048 262.826666h-33.158096z'
            }
          )
        )
      }

      getLabelShape() {
        return h(
          'text',
          {
            fill: '#000000',
            fontSize: 12,
            x: NodeSize / 2,
            y: NodeSize + 20,
            textAnchor: 'middle',
            dominantBaseline: 'middle'
          },
          'MQTT生产者'
        )
      }

      getShape() {
        const { x, y, width, height } = this.getAttributes()
        const transform = `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`
        return h(
          'g',
          {
            transform
          },
          [
            h(
              'rect',
              {
                rx: 5,
                ry: 5,
                width: NodeSize,
                height: NodeSize,
                fill: '#fff',
                stroke: '#3D6380',
                strokeWidth: 1
              }
            ),
            this.getIconShape(),
            this.getLabelShape()
          ]
        )
      }
    }
    class Model extends PolygonNodeModel {
      constructor(data, graphModel) {
        super(data, graphModel)
        this.points = [
          [NodeSize / 2, 0],
          [NodeSize, NodeSize / 2],
          [NodeSize / 2, NodeSize],
          [0, NodeSize / 2]
        ]
      }
    }

    return {
      view: Node,
      model: Model
    }
  })
}
